<template>
  <div>
    <el-scrollbar v-show="!isModeHandle">
      <client-only>
        <div
          :class="isMode ? 'menu-view' : ''"
          :style="{
            position: 'fixed',
            left: '0px',
            top: '0px',
            width: isMode ? '100%' : '200px',
            height: isMode ? '' : '100vh',
            zIndex: 2000,
            backgroundColor: '#303643',
          }"
        >
          <NuxtLink to="/" v-show="isMode" class="wap-project-name" alt="">{{
            configInfoData.name
          }}</NuxtLink>
          <el-menu
            :default-active="defaultActive"
            :ellipsis="false"
            unique-opened
            :mode="isMode ? 'horizontal' : 'vertical'"
            background-color="#303643"
            text-color="#DCE3E8"
            active-text-color="#fe7300"
            @select="handleSelect"
          >
            <menuItem
              v-for="(item, index) in typeListData"
              :menu="item"
              :key="index"
              :ind="index"
            />
          </el-menu>
          <div class="switch-box-yes"
            ><el-switch
              v-model="colorMode"
              inline-prompt
              size="large"
              active-color="#f2f2f2"
              inactive-color="#f2f2f2"
              border-color="#f2f2f2"
              :inactive-icon="Sunny"
              :active-icon="Moon"
            ></el-switch>
          </div>
          <div v-show="!isModeHandle && !isMode" class="arrow-left-icon-view">
            <el-icon size="22" color="#ffffff" @click="handleClick">
              <el-icon-d-arrow-left />
            </el-icon>
          </div>
        </div>
      </client-only>
    </el-scrollbar>
    <div style="width: 100%; height: 58px"></div>
    <div class="expand-icon-view" v-show="!isMode">
      <el-icon size="30" color="#ffffff" class="expand-icon" @click="handleClick">
        <el-icon-expand />
      </el-icon>
      <NuxtLink to="/" class="wap-project-name" alt="">{{ configInfoData.name }}</NuxtLink>
    </div>
    <div class="handle-view" @click="handleClick" v-show="!isModeHandle && !isMode"></div>
  </div>
</template>
<script lang="ts" setup>
import Moon from './icon/moon.vue';
import Sunny from './icon/sunny.vue';
import menuItem from './menuItem/index.vue';
import { onMounted } from 'vue';
const configInfoData = useConfig();
const typeListData = useArticleType();
const defaultActive = useDefaultActive();
const isMode = useIsMode();
const config = useRuntimeConfig();
const isModeHandle = useIsModeHandle();
const handleClick = () => {
  isModeHandle.value = !isModeHandle.value;
};
const setClientWidth = () => {
  if (document.body.clientWidth > 960) {
    isMode.value = true;
    isModeHandle.value = false;
  } else {
    isMode.value = false;
    isModeHandle.value = true;
  }
};
const handleSelect = (key: string) => {
  defaultActive.value = key;
  setClientWidth();
};

const color = useColorMode();
const colorMode = computed({
  get: () => color.value === 'dark',
  set: () => (color.preference = color.value === 'dark' ? 'light' : 'dark'),
});

if (!config.isServer) {
  setClientWidth();
}
onMounted(() => {
  window.onresize = () => {
    setClientWidth();
  };
});
</script>
<style lang="less" scoped>
@import './index.less';
.el-menu--horizontal {
  border-bottom: none;
}
</style>
